<template>
    <div class="Preson">
        <h2>姓名：{{ name }}</h2>
        <h2>年龄{{ age }}</h2>
        <h2>电话：{{ tel }}</h2>
        <button @click="ChangeName">修改名字</button>
        <button @click="ChangeAge">修改年龄</button>
        <button @click="showTel">查看联系方式</button>
    </div>
    </template>
    
<script lang="ts" setup>
// ref可以定义基本数据和对象类型的响应式数据
    import {ref} from 'vue'
    //数据
    let name = ref('张三')
    let age = ref(20)
    let tel = '123131414423'

    // 方法
    function showTel() {
       alert(tel)
    };
    function ChangeName() {
        name.value = 'zhang-san'//修改name，页面没有变化
        console.log(name);//name确实改了，但不是响应式数据
    
    };
    function ChangeAge() {
       age.value += 1
    };
            
</script>

    <style scoped>
    .Preson{
        background-color: #ddd;
        box-shadow: 0 0 10px;
        border-radius: 10px;
        padding: 20px;
    }
    button{
        margin: 0 10px;
    }
    </style>